<template>
  <div>
    <panel-group :data-list="dataList"></panel-group>
    <div id="echars-dist"
         class="char"
         style="width:90%;height: 430px; margin:10px auto 0 auto;">
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import PanelGroup from '@/components/customCom/panelGroup/main'
import { getDistribution } from '@/api/maintenance'

export default {
  props: {
    searchForm: {
      type: Object
    },
    activeName: {
      type: String
    }
  },
  data() {
    return {
      options: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['自签', '协签']
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额',
            min: 0,
            interval: 200,
            axisLabel: {
              formatter: '{value} 万'
            }
          }
        ],
        series: [
          {
            name: '自签',
            type: 'bar',
            stack: '自签',
            data: []
          },
          {
            name: '协签',
            type: 'bar',
            stack: '自签',
            data: []
          }
        ]
      },
      dataList: []
    }
  },
  mounted() {
    if (this.activeName === 'distribution') this.getData()
  },
  methods: {
    // 请求数据
    getData() {
      getDistribution(this.searchForm).then(res => {
        if (res.data.success) {
          const result = res.data.data
          // panel数据
          this.dataList = [
            {
              title: '完成',
              value: (result.sinceDone + result.agreementdDone).toFixed(2),
              icon: 'icon-coin-yen',
              type: true
            },
            {
              title: '自签完成',
              value: result.sinceDone,
              icon: 'icon-user',
              type: true
            },
            {
              title: '协签完成',
              value: result.agreementdDone,
              icon: 'icon-users',
              type: true
            }, {
              title: '计划池',
              value: (result.sincePlan + result.agreementdPlan).toFixed(2),
              icon: 'icon-cart'
            }, {
              title: '自签池',
              value: result.sincePlan,
              icon: 'icon-user'
            }, {
              title: '协签池',
              value: result.agreementdPlan,
              icon: 'icon-users'
            }
          ]
          this.options.xAxis[0].data = []
          this.options.series[0].data = []
          this.options.series[1].data = []
          // 初始化图标轴与数据
          result.data.forEach(item => {
            this.options.xAxis[0].data.push(item.month)
            this.options.series[0].data.push(item.since)
            this.options.series[1].data.push(item.agreementd)
          })
          // 合并数组
          const _data = this.options.series[0].data.concat(this.options.series[1].data)
          // 取数组最大值除10,作为Y轴间隔
          this.options.yAxis[0].interval = Math.round(Math.max(..._data) / 5, 0)
          // 数据加载完成后渲染图表
          var myChartDist = echarts.init(document.getElementById('echars-dist'), 'macarons')
          myChartDist.setOption(this.options)
        }
      })
    }
  },
  components: {
    PanelGroup
  },
  watch: {
    activeName() {
      if (this.activeName === 'distribution') this.getData()
    }
  }
}
</script>
